<!-- eslint-disable vue/no-mutating-props -->
<script lang='ts' setup>
import { ref, watch} from 'vue';
import { useRouter } from 'vue-router';
import { skuDelete,productChangeOnSelf } from '/@/api/commodity';
import { ElMessageBox, ElMessage, ElTable } from 'element-plus';
// 引入组件
const router = useRouter();
const skuTableRef = ref<InstanceType<typeof ElTable>>();

const props = withDefaults(defineProps<{
    spuId: number;
    skuTableData: any;
    selectIdData: any;
}>(), {
    spuId:null,
    skuTableData: () => ([]),
    selectIdData: () => ([])
})

watch(() => props.selectIdData, () => { 
    setTimeout(() => {
        // 假设我们要默认勾选 id 为 1 的行
        let ixx = props.selectIdData.filter(item => item.spuId === props.spuId);
        console.log(JSON.stringify(ixx))
        if(ixx.length > 0){
            props.skuTableData.forEach((item:any) => {
                if (ixx[0].skuId.find(itemx => itemx == item.skuId)) {
                    // 把判断出来的默认表格数据push到创建的数组中
                    skuTableRef.value!.toggleRowSelection(item, true)
                }
            });
        }else{
            props.skuTableData.forEach((item:any) => {
                // 把判断出来的默认表格数据push到创建的数组中
                skuTableRef.value!.toggleRowSelection(item, false)
            });
        }
        
    }, 100); },
    {
        deep: true,
        immediate: true
    }
);

// 商品上下架状态修改
const changeStatusFun = async(type:string,obj: any) => {
	let params = {};
	if(type=="spu"){
		params = {
			spuId: obj.spuId,
			onSelf: obj.onSelf
		}
	}else if(type=="sku"){
		params = {
			skuId: obj.skuId,
			onSelf: obj.onSelf
		}
	}
	const { method } = await productChangeOnSelf(params);
	if(method == 'success'){
		ElMessage.success('修改成功');
	}
};

// 商品sku或spu删除
const delFun = (type: string,id?: number) => {
	ElMessageBox.confirm(`此操作将永久删除该规格项，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning', 
	}).then( async() => {
        let res = await skuDelete(id);
        ElMessage.success('删除成功');
	}).catch(() => {});
}

const handleSelectionChange = (val:any) => {
    if(val.length == 0){
        let indexR = props.selectIdData.findIndex(itemx => itemx.spuId == props.spuId)
        if(indexR != -1){
            // eslint-disable-next-line vue/no-mutating-props
            props.selectIdData.splice(indexR, 1);
        }
	}else{
        let indexR = props.selectIdData.findIndex(itemx => itemx.spuId == props.spuId)
        let skuIDlist = val.map(item => item.skuId);
        if( indexR != -1){
            // eslint-disable-next-line vue/no-mutating-props
            props.selectIdData[indexR].skuId = skuIDlist
        }else{
            // eslint-disable-next-line vue/no-mutating-props
            props.selectIdData.push({
                spuId: props.spuId,
                skuId: skuIDlist
            })
        }
	}
}


const secectItemFun = (selection:any, row:any) => {
	const selected = selection.some(s => s == row);
	if (selected) {
        let skuIDlist = selection.map(item => item.skuId);
        let indexR = props.selectIdData.findIndex(itemx => itemx.spuId == props.spuId)
        if( indexR != -1){
            // eslint-disable-next-line vue/no-mutating-props
            props.selectIdData[indexR].skuId = skuIDlist
        }else{
            // eslint-disable-next-line vue/no-mutating-props
            props.selectIdData.push({
                spuId: props.spuId,
                skuId: skuIDlist
            })
        }
		console.log('勾选行：', row);
	} else {
        if(selection.length > 0){
            let skuIDlist = selection.map(item => item.skuId);
            let indexR = props.selectIdData.findIndex(itemx => itemx.spuId == props.spuId)
            if(indexR != -1){
                // eslint-disable-next-line vue/no-mutating-props
                props.selectIdData[indexR].skuId = skuIDlist
            }
        }else{
            let indexR = props.selectIdData.findIndex(itemx => itemx.spuId == props.spuId)
            if(indexR != -1){
                // eslint-disable-next-line vue/no-mutating-props
                props.selectIdData.splice(indexR, 1);
            }
            
        }
        
		// 取消选中
		// console.log('取消勾选行：', row);
	}
};


</script>
<template>
    <section class="pl20" style="background-color:var(--next-bg-main-color);">
        <el-table ref="skuTableRef" :data="props.skuTableData"  
            @select-all="handleSelectionChange" @select="secectItemFun">
            <el-table-column type="selection" width="30" />
            <el-table-column label="SKU" width="90">
                <template #default="scope">
                    <span> {{scope.row.skuId }} </span>
                </template>
            </el-table-column>
            <el-table-column label="图片" width="90">
                <template #default="scope">
                    <el-image  class="borderRadius5" style="width:32px; height: 32px;" :src="scope.row.skuImgUrl" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column label="品牌">
                <template #default="scope">
                    <span>{{ scope.row.skuTypeName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" width="380" class-name="aaaa">
                <template #default="scope">
                    <span class="ellipsis2">{{ scope.row.skuTypeName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="属性" align="center">
                <template #default="scope">
                    <span>{{ scope.row.skuTypeName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="规格" align="center">
                <template #default="scope">
                    <span>{{ scope.row.skuSerialName }}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="零售价" align="center">
                <template #default="scope">
                    <span>￥{{ scope.row.retailPrice }}元</span>
                </template>
            </el-table-column>
            <!-- <el-table-column label="销售渠道" align="center">
                <template #default="scope">
                    <span>{{ scope.row.skuSerialName }}</span>
                </template>
            </el-table-column> -->
            <!-- <el-table-column label="状态">
                <template #default="scope">
                    <el-switch @click="changeStatusFun('sku',scope.row)" v-model="scope.row.onSelf"  :active-value=1 :inactive-value=0 />
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
                <template #default="scope">
                    <el-button text type="primary" @click="delFun('sku',scope.row.skuId)">
                        删除
                    </el-button>
                </template>
            </el-table-column> -->
        </el-table>
    </section>
</template>

<style lang='scss' scoped>
	:deep(.el-table .aaaa .cell ){
		justify-content: left;
		padding-left: 5px;
	}
</style>